<template>
	<view class="apply-pages" v-if="isLoad">
		<view class="apply-form pl-lg pr-lg">
			<view class="fill-base mt-md radius-16">
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>店铺名称</view>
					<input v-model="form.name" type="text" class="item-input flex-1" maxlength="20"
						:placeholder="rule[0].errorMsg" />
				</view>
				<view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>副标题</view>
					<input v-model="form.scope" type="text" class="item-input flex-1" 
						placeholder="请输入副标题" />
				</view>
				<view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>经营类目</view>
					<view class="item-input text">
						<picker mode="selector" range-key="gc_name" @change="colChange" :range="classList">
							<view style="height: 36px;line-height: 36px;">
						        {{ form.two_classid_name}}
						    </view>
						</picker>
					</view>

				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>出售内容</view>
					<view class="flex-between pl-lg pr-lg b-1px-b">
						<!-- <view class="item-input flex-1 flex-y-center"> -->
							<!-- <view @tap.stop="form.type = index" class="flex-y-center" :class="[{'mr-lg':index==0}]"
								:style="{color:form.type == index ? primaryColor:''}" v-for="(item,index) in ['服务','成长','乐购']"
								:key="index"><i class="iconfont icon-xuanze mr-sm"
									:class="[{'icon-xuanze-fill':form.type == index}]"></i>{{item}}
							</view> -->
							
							    <checkbox-group v-model="form.type" @change="checkboxChange">
							      <label>  
							        <checkbox value="2" :checked="is_goods" style="margin: 5px;">商品</checkbox>  
							      </label>  
								  <label >
								    <checkbox value="1" :checked="no_goods" style="margin: 5px;">非商品</checkbox>  
								  </label> 
							    </checkbox-group>  
						<!-- </view> -->
					</view>
				</view>
				
			</view>
			
			<view class="fill-base mt-md radius-16">
			
				<view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>经营者姓名</view>
					<input v-model="form.contact" type="text" class="item-input flex-1" 
						placeholder="请输入经营者姓名" />
				</view>
				<view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>经营者电话</view>
					<input v-model="form.phone" type="text" class="item-input flex-1" 
						placeholder="请输入经营者电话" />
				</view>
				<view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>身份证号</view>
					<input v-model="form.cardno" type="text" class="item-input flex-1" 
						placeholder="请输入身份证号" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text"><text style="color: red;">*</text>详细地址</view>
					<view @tap.stop="toChooseLocation" class="item-input text flex-1">
						<view class="flex-y-center text-right">
							<view class="flex-1 text-right">{{form.address || `点击右边图标设置`}}</view><i
								class="iconfont iconjuli ml-sm" :style="{color: primaryColor}"></i>
						</view>
					</view>
				</view>
				<!-- <view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text">所在城市</view>
					<input v-model="form.city" type="text" class="item-input flex-1" 
						placeholder="请输入所在城市,如北京" />
				</view> -->
				<view class="flex-between ml-lg mr-lg">
					<view class="item-text"><text style="color: red;">*</text>详细楼号</view>
					<input v-model="form.address_info" type="text" class="item-input flex-1"
						placeholder="请输入详情楼栋,门牌号" />
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="fill-base mt-md radius-16">
					<view class="flex-between pl-lg pr-lg">
						<view class="item-text"><text style="color: red;">*</text>店铺简介</view>
						<input :disabled="true" type="text" class="item-input flex-1" />
					</view>
					<textarea v-model="form.des" class="item-textarea pd-lg" maxlength="300" placeholder="输入店铺简介（选填）" />
					<view class="text-right pb-lg pr-lg">
						{{form.des.length>300?300:form.des.length}}/300
					</view>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text"><text style="color: red;">*</text>店铺招牌</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.thumb" filetype="picture"
						imgtype="thumb" text="上传图片" :imgsize="1">
					</upload>
				</view>
			</view>
			
			<view class="fill-base mt-md radius-16">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text"><text style="color: red;">*</text>身份证照片</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.id_front" filetype="picture"
						imgtype="id_front" text="上传身份证带头像一面" :imgsize="1">
					</upload>
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.id_p" filetype="picture"
						imgtype="id_p" text="手持身份证照片" :imgsize="1">
					</upload>
				</view>
				<view style="height:25px;">
					<view style="width: 40%;float: left;text-align: center;">身份证 正面</view>
					<view style="width: 40%;float: right;text-align: center;">手持 身份证</view>
				</view>
			</view>
			
			<view class="fill-base mt-md radius-16">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text">资质证书</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.license" filetype="picture"
						imgtype="license" text="上传图片" :imgsize="1">
					</upload>
				</view>
			</view>
			<view class="fill-base mt-md radius-16" style="padding:20rpx;">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text"><text style="color: red;">*</text>营业执照</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.certificate" filetype="picture"
						imgtype="certificate" text="上传图片" :imgsize="1">
					</upload>
				</view>
				<view class="item-text" >须知</view>
				<text style="color:lightgrey;padding:20rpx">根据平台规定，商家可享受免费上架商品的权利，包括GPS定位，电话联系方式，产品的详情介绍使用说明等等。如果进行小程序线上交易收款，需要消费198元开通认证即可。</text>
			</view>
			
		</view>

		<view class="space-max-footer"></view>

		<fix-bottom-button @cancel="toDel" @confirm="submit" :text="textArr" bgColor="#fff"></fix-bottom-button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import $api from '@/api/index.js';
	export default {
		components: {},
		data() {
			return {
				is_goods:true,
				no_goods:true,
				isLoad: false,
				options: {},
				textArr: [{
					text: '申请店铺',
					type: 'confirm'
				}],
				form: {
					id: 0,
					type: [], // 1商品，2项目
					name: '',
					scope:'',
					contact:'',
					phone:'',
					cardno:'',
					city:'',
					one_classid: '6',
					one_classid_name: '交友',
					two_classid: '0',
					two_classid_name: '请选择类目',
					des: '',
					address: '',
					address_info: '',
					lng: '',
					lat: '',
					thumb: '', // 店铺招牌
					certificate: '' ,// 营业执照
					license:'',
					id_front:'',//身份证正面照
					id_p:''//手持身份证照片
				},
				rule: [{
						name: "user_name",
						checkType: "isNotNull",
						errorMsg: "请输入店铺名称",
						regType: 2
					}, {
						name: "mobile",
						checkType: "isMobile",
						errorMsg: "请选择经营类目"
					},
					{
						name: "address",
						checkType: "isNotNull",
						errorMsg: "设置地区（选填）"
					},
					{
						name: "address_info",
						checkType: "isNotNull",
						errorMsg: "输入街道、楼牌号等（选填）",
						regType: 2
					},
				],
				lockTap: false,
				className: '',
				classList: []
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex() {
				let {
					type
				} = this.options
				uni.setNavigationBarTitle({
					title: type == 1 ? `编辑店铺` : `申请开店`
				})
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				
				let list = await this.$api.service.classList({
					class_id: 0
				});
				
				this.classList = list
			
				if (type == 0) {
					this.textArr = [{
						text: '申请开店',
						type: 'confirm'
					}],
					this.isLoad = true
					return
				}
				this.textArr = [{
					text: '完成',
					type: 'confirm'
				}],
				await this.getDetail()
			},
			checkboxChange(e){
				console.log(e.detail.value)
				if(e.detail.value.indexOf("1") !== -1 && e.detail.value.indexOf("2") === -1){
					this.form.type = 1
				}else if(e.detail.value.indexOf("2") !== -1 && e.detail.value.indexOf("1") === -1){
					this.form.type = 2
				}else if(e.detail.value.indexOf("2") !== -1 && e.detail.value.indexOf("1") !== -1){
					this.form.type = 0
				}else{
					this.form.type = ''
				}
				console.log(this.form.type)
			},
			async getDetail() {
				
				let data = await this.$api.mine.shopdetails();
				let detail = data.shop_info
				
				detail.certificate = [{path: detail.certificate}]
				detail.thumb = [{path: detail.thumb}]
				detail.license = [{path: detail.license}]
				detail.id_front = [{path: detail.id_front}]
				detail.id_p = [{path: detail.id_p}]
				// detail.type = detail.type == 1 ? 0 : 1
				if(detail.type == 1){
					this.is_goods=false
					this.no_goods=true
				}else if(detail.type == 2){
					this.is_goods=true
					this.no_goods=false
				}else{
					this.is_goods=true
					this.no_goods=true
				}
				
				this.form = detail
				
				this.isLoad = true
				
				this.$util.hideAll()
			},
			// 选择地区
			async toChooseLocation(e) {
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				let [, {
					address = '',
					longitude,
					latitude
				}] = await uni.chooseLocation();
				if (!address) return
				this.form.address = address
				this.form.lng = longitude
				this.form.lat = latitude
			},
			 colChange(e) {
				// 第一列，选择第一分类
				// if (e.detail.column == 0) {
				// 	let list = await this.$api.service.classList({
				// 		class_id: this.classList[0][e.detail.value].id
				// 	});
				// 	this.form.one_classid = this.classList[0][e.detail.value].id
				// 	this.form.one_classid_name = this.classList[0][e.detail.value].name
				// 	this.classList[1] = list
					// 强制视图更新
				// 	this.$set(this.classList, 1, list)
				// }
				// 第二列，选择第二分类
				// if (e.detail.column == 1) {
					// 选中二级分类id one_classid_name，two_classid_name
					this.form.two_classid = this.classList[e.detail.value].gc_id
					this.form.two_classid_name = this.classList[e.detail.value].gc_name
					console.log(this.form)
				// }
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				console.log(imagelist, e, "=====imgUpload")
				this.form[imgtype] = imagelist;
			},
			async toDel() {
				let [res_del, {
					confirm
				}] = await uni.showModal({
					title: '提示',
					content: "请确认是否要删除此数据?"
				})
				if (!confirm) return;
				let {
					id
				} = this.form
				let {
					check_id
				} = this.$util.getPage(-1)
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.mine.addressDel({
						id
					})
					this.$util.hideAll()
					this.$util.showToast({
						title: `删除成功`,
					});
					this.lockTap = false
					if (id == check_id) {
						this.updateOrderItem({
							key: 'haveOperItem',
							val: true
						})
					}
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			
			async submit() {
				if(this.form.name == '')
				{
					uni.showToast({
						title:'店铺名称不能为空'
					})
					return
				}
				if(this.form.scope == '')
				{
					uni.showToast({
						title:'副标题不能为空'
					})
					return
				}
				if(this.form.phone == '')
				{
					uni.showToast({
						title:'电话不能为空'
					})
					return
				}
				if(this.form.contact == '')
				{
					uni.showToast({
						title:'经营者姓名不能为空'
					})
					return
				}
				if(this.form.certificate == '')
				{
					uni.showToast({
						title:'营业执照不能为空'
					})
					return
				}
				if(this.form.thumb == '')
				{
					uni.showToast({
						title:'店铺招牌不能为空'
					})
					return
				}
				if(this.form.two_classid == '')
				{
					uni.showToast({
						title:'店铺分类不能为空'
					})
					return
				}
				if(this.form.cardno == '')
				{
					uni.showToast({
						title:'身份证不能为空'
					})
					return
				}
				if(this.form.address == '')
				{
					uni.showToast({
						title:'地址不能为空'
					})
					return
				}
				if(this.form.address_info == '')
				{
					uni.showToast({
						title:'楼号不能为空'
					})
					return
				}
				if(this.form.des == '')
				{
					uni.showToast({
						title:'店铺简介不能为空'
					})
					return
				}
				
				if(this.form.type === '')
				{
					uni.showToast({
						title:'出售内容不能空',
						icon:'error'
					})
					return
				}
				let param = this.$util.deepCopy(this.form)
				let msg = this.validate(param)
				// if (msg) {
				// 	this.$util.showToast({
				// 		title: msg
				// 	});
				// 	return;
				// }
				
				// debugger
				if(this.form.thumb.length == 0){
					param.thumb = ''
				} else {
					param.thumb = this.form.thumb[0].path
				}
				if(this.form.certificate.length == 0){
					param.certificate = ''
				} else {
					param.certificate = this.form.certificate[0].path
				}
				if(this.form.id_front.length == 0){
					param.id_front = ''
				} else {
					param.id_front = this.form.id_front[0].path
				}
				if(this.form.license.length == 0){
					param.license = ''
				} else {
					param.license = this.form.license[0].path
				}
				if(this.form.id_p.length == 0){
					param.id_p = ''
				} else {
					param.id_p = this.form.id_p[0].path
				}
				param.type = this.form.type
				
				// param.type = this.form.type == 0 ? 1 : 2
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					if(this.options.type == 1){
						await this.$api.mine.shopedit(param)
					} else {
						await this.$api.mine.applyshop(param)
					}
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功`,
					})
					// this.$util.goUrl({
					// 	url: '/user/pages/shop/shop',
					// })
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: 'navigateBack'
					})
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
				
			}
		}
	}
</script>

<style lang="scss">
</style>
